<template>
  <basic-container v-loading="loading">
    <!-- 发票信息表单 -->
    <section class="haruyuki-bg-color-white haruyuki-padding invoice-section">
      <el-form
        :model="invoiceForm"
        :rules="rules"
        ref="invoiceForm"
        label-width="120px"
        size="small"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="项目分类" prop="projectType">
              <select-dict
                ref="projectType"
                :select.sync="invoiceForm.projectType"
                code="project_type"
                placeholder-text="项目分类"
              ></select-dict>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发票类型" prop="invoiceType">
              <select-dict
                ref="invoiceType"
                :select.sync="invoiceForm.invoiceType"
                code="rpt_invoice_type"
                placeholder-text="发票类型"
              ></select-dict>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否允许开专票" prop="isSpecial">
              <select-dict
                ref="isSpecial"
                :select.sync="invoiceForm.isSpecial"
                code="is_special"
                placeholder-text="发票类型"
              ></select-dict>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </section>

    <!-- 买方信息表单 -->
    <section
      class="haruyuki-bg-color-white haruyuki-mt-20 invoice-section haruyuki-flex"
    >
      <div class="title-box haruyuki-padding">
        <span class="haruyuki-title">购方信息</span>
      </div>
      <div class="haruyuki-flex1 haruyuki-padding">
        <!-- <div class="haruyuki-title-bar-sm">
          <div class="haruyuki-radio-group">
            <el-radio v-model="buyerForm.buyerType" :label="1">自然人</el-radio>
            <el-radio v-model="buyerForm.buyerType" :label="2"
              >非自然人</el-radio
            >
          </div>
        </div> -->
        <el-form label-width="120px" size="small" :disabled="buyerDisabled">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="购方名称" prop="name">
                <el-input v-model="buyerForm.name" placeholder="请输入购方名称">
                  <template slot="append">
                    <i
                      class="el-icon-search"
                      @click="dialogBuyerVisible = true"
                    ></i>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="购方标识" prop="name">
                <el-radio-group v-model="buyerForm.buyerType">
                  <el-radio :label="2">自然人</el-radio>
                  <el-radio :label="1">非自然人</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20" v-if="buyerForm.buyerType === 2">
            <el-col :span="12">
              <el-form-item label="国籍" prop="country">
                <el-select
                  v-model="buyerForm.country"
                  placeholder="中国"
                  style="width: 100%"
                >
                  <el-option label="中国" value="156"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件类型" prop="idType">
                <el-select
                  v-model="buyerForm.idType"
                  placeholder="身份证"
                  style="width: 100%"
                >
                  <el-option label="身份证" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item
                :label="`${
                  buyerForm.buyerType === 1 ? '纳税人识别号' : '证件号码'
                }`"
                prop="idNo"
              >
                <el-input
                  v-model="buyerForm.idNo"
                  placeholder="请输入证件号码"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="购方地址" prop="address">
                <el-input
                  v-model="buyerForm.address"
                  placeholder="请输入购方地址"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="购方电话" prop="phone">
                <el-input
                  v-model="buyerForm.phone"
                  placeholder="请输入购方电话"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="购方银行" prop="bankName">
                <el-input
                  v-model="buyerForm.bankName"
                  placeholder="请输入购方银行"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="购方银行账号" prop="bankNo">
                <el-input
                  v-model="buyerForm.bankNo"
                  placeholder="请输入购方银行账号"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </section>

    <!-- 商品信息表单 -->
    <section
      class="haruyuki-bg-color-white haruyuki-padding haruyuki-mt-20 invoice-section"
    >
      <div
        class="haruyuki-flex-space-between haruyuki-mb-10 haruyuki-align-items-center"
      >
        <div>
          <el-button type="primary" size="small" @click="addProduct"
            >新增</el-button
          >
          <el-button type="danger" size="small" @click="removeProduct">删除</el-button>
        </div>
      </div>
      <el-table
        :data="productList"
        :summary-method="getSummaries"
        show-summary
        border
        @selection-change="productSelectionChange"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          label="序号"
          type="index"
          min-width="60"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="含税标识" prop="taxIncluded" width="120">
          <template slot-scope="scope">
            <el-select v-model="scope.row.taxIncluded" placeholder="请选择">
              <el-option label="含税" value="1"></el-option>
              <el-option label="不含税" value="0"></el-option>
            </el-select>
          </template>
        </el-table-column> -->
        <el-table-column label="商品名称" prop="taxNo" min-width="150">
          <template slot-scope="scope">
            <select-page
              ref="productSelect"
              label="productName"
              value="taxNo"
              :select.sync="scope.row.taxNo"
              :url="'invoice/product/productList'"
              placeholder-text="商户名称"
              filter-key="searchParam"
              @change="(val, row) => selectProduct(scope.$index, val, row)"
            ></select-page>
          </template>
        </el-table-column>
        <el-table-column label="规格型号" prop="specification" min-width="120">
          <template slot-scope="scope">
            <!-- <el-input
              v-model="scope.row.specification"
              placeholder="请输入"
            ></el-input> -->
            <span>{{ scope.row.specification }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单位" prop="unit" min-width="100">
          <template slot-scope="scope">
            <!-- <el-input v-model="scope.row.unit" placeholder="请输入"></el-input> -->
            <span>{{ scope.row.unit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数量" prop="productCount" min-width="100">
          <template slot-scope="scope">
            <!-- <el-input-number
              v-model="scope.row.productCount"
              :min="1"
              :precision="0"
              controls-position="right"
              @change="calculateAmount(scope.$index)"
              placeholder="请输入"
            ></el-input-number> -->
            <span>{{ scope.row.productCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价(含税)" prop="price" min-width="120">
          <template slot-scope="scope">
            <el-input
              type="number"
              v-model="scope.row.price"
              :min="0"
              @change="calculateAmount(scope.$index)"
              placeholder="请输入"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="金额(含税)" prop="amount" min-width="120">
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.amount"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="税率" prop="taxRate" min-width="120">
          <template slot-scope="scope">
            <!-- <el-input
              v-model="scope.row.taxRate"
              placeholder="请输入"
            ></el-input> -->
            <span>{{ scope.row.taxRate }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="税额" prop="taxAmount" min-width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.taxAmount" disabled></el-input>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="操作" width="120" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="removeProduct(scope.$index)"
              class="delete-btn"
              >添加折扣行</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <!-- <div class="haruyuki-table-summary haruyuki-mt-10">
        <span>合计</span>
        <span class="haruyuki-summary-amount">￥12333.00</span>
      </div> -->
    </section>

    <!-- 特定信息-旅客运输服务 -->
    <section
      class="haruyuki-bg-color-white haruyuki-padding haruyuki-mt-20 invoice-section"
    >
      <div class="haruyuki-title-bar-sm">
        <span class="haruyuki-title">特定信息-旅客运输服务</span>
      </div>
      <div
        class="haruyuki-flex-space-between haruyuki-align-items-center haruyuki-mb-10"
      >
        <div>
          <el-button type="primary" size="small" @click="addPassenger"
            >新增</el-button
          >
          <el-button type="danger" size="small" @click="removePassenger">删除</el-button>
        </div>
      </div>
      <el-table :data="passengerList" border style="width: 100%" @selection-change="passengerSelectionChange">
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column label="旅客" prop="name" min-width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" placeholder="请输入"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="出行人证件类型" prop="idType" min-width="150">
          <template slot-scope="scope">
            <el-select v-model="scope.row.idType" placeholder="个人">
              <el-option label="个人" value="1"></el-option>
              <el-option label="企业" value="2"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="出行人证件号码" prop="idNo" min-width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.idNo" placeholder="请输入"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="出行日期" prop="travelDate" min-width="180">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.travelDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            ></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="出发地" prop="depart" min-width="150">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.depart"
              placeholder="请填写出发地"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="到达地" prop="arrive" min-width="150">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.arrive"
              placeholder="请填写到达地"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="交通工具类型"
          prop="vehicleType"
          min-width="150"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.vehicleType" placeholder="飞机">
              <el-option label="飞机" value="1"></el-option>
              <el-option label="火车" value="2"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="座位等级" prop="seatLevel" min-width="150">
          <template slot-scope="scope">
            <el-select v-model="scope.row.seatLevel" placeholder="一等座">
              <el-option label="一等座" value="1"></el-option>
              <el-option label="二等座" value="2"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <!-- 销售方和备注 -->
    <section class="haruyuki-bg-color-white haruyuki-mt-20 invoice-section">
      <div class="haruyuki-flex">
        <div class="haruyuki-flex haruyuki-flex1">
          <div class="title-box haruyuki-padding">
            <span class="haruyuki-title">销方信息</span>
          </div>
          <div class="haruyuki-flex1 haruyuki-padding">
            <el-form
              :model="sellerForm"
              label-width="120px"
              size="small"
              :disabled="sellerDisabled"
            >
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="销方名称" prop="name">
                    <!-- <el-input v-model="sellerForm.name" disabled>
                      <template slot="append">
                        <i
                          class="el-icon-search"
                          @click="dialogSellerVisible = true"
                        ></i>
                      </template>
                    </el-input> -->
                    <span>{{ sellerForm.name }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="电话、地址">
                    <span>{{ sellerForm.phone }} {{ sellerForm.address }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="开户行及账号">
                    <span
                      >{{ sellerForm.bankName }} {{ sellerForm.bankNo }}</span
                    >
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div class="haruyuki-flex haruyuki-flex1">
          <div class="title-box bl haruyuki-padding">
            <span class="haruyuki-title">备注信息</span>
          </div>
          <div class="haruyuki-flex1 haruyuki-padding">
            <el-input
              type="textarea"
              :rows="8"
              placeholder="请输入备注"
              v-model="remark"
            ></el-input>
          </div>
        </div>
      </div>
    </section>

    <!-- 收款人、复核人、开票人 -->
    <section
      class="haruyuki-bg-color-white haruyuki-padding haruyuki-mt-20 invoice-section"
    >
      <el-form label-width="120px" size="small">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="收款人">
              <span>{{ payee }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="复核人">
              <span>{{ checker }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开票人">
              <span>{{ drawer }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </section>
    <el-dialog
      class="el-dialog__wrapper avue-dialog avue-crud__dialog"
      title="购方信息"
      :visible.sync="dialogBuyerVisible"
      append-to-body
      :close-on-click-modal="false"
      :before-close="handleBuyerClose"
      width="70%"
    >
      <avue-crud
        :option="buyerOption"
        :table-loading="buyerLoading"
        :data="buyerData"
        :page.sync="buyerPage"
        v-model="buyerForm"
        ref="crud"
        @current-change="buyerCurrentChange"
        @size-change="buyerSizeChange"
        @refresh-change="buyerRefreshChange"
        @on-load="buyerOnLoad"
      >
        <template slot="menu" slot-scope="{ row }">
          <el-button
            type="text"
            size="small"
            icon="el-icon-check"
            @click="handleBuyer(row)"
            >选择</el-button
          >
        </template>
      </avue-crud>
    </el-dialog>
    <el-dialog
      class="el-dialog__wrapper avue-dialog avue-crud__dialog"
      title="销方信息"
      :visible.sync="dialogSellerVisible"
      append-to-body
      :close-on-click-modal="false"
      :before-close="handleSellerClose"
      width="70%"
    >
      <avue-crud
        :option="sellerOption"
        :table-loading="sellerLoading"
        :data="sellerData"
        :page.sync="sellerPage"
        v-model="sellerForm"
        ref="crud"
        @current-change="sellerCurrentChange"
        @size-change="sellerSizeChange"
        @refresh-change="sellerRefreshChange"
        @on-load="sellerOnLoad"
      >
        <template slot="menu" slot-scope="{ row }">
          <el-button
            type="text"
            size="small"
            icon="el-icon-check"
            @click="handleSeller(row)"
            >选择</el-button
          >
        </template>
      </avue-crud>
    </el-dialog>
    <!-- 提交按钮 -->
    <div class="invoice-footer">
      <el-button type="primary" @click="submitForm">确认创建</el-button>
    </div>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
import { getDetail, save } from "@/api/rb-merchant/payinvoice/payinvoice";
import { add, info } from "@/api/rb-merchant/payinvoice/payinvoiceGoods";
import { getList as getBuyerList } from "@/api/rb-merchant/payinvoice/payinvoiceBuy";
import { addressList } from "@/api/rb-merchant/payinvoice/payinvoiceSales";
import selectDict from "@/components/select-dict/select-dict";

export default {
  name: "PayinvoiceDefault",
  data() {
    return {
      // 基本信息
      invoiceForm: {
        projectType: '', // 项目分类，1-普通项目，2-特定项目
        invoiceType:'', // 发票类型，1-电子普通发票，2-纸质普通发票，3-纸质专用发票
        isSpecial: '0',
        invoiceKind: 1,
      },
      buyerForm: {
        buyerType: 2,
        buyerNo: "",
        name: "",
        taxNo: "",
        country: "156",
        idType: 1,
        idNo: "",
        address: "",
        phone: "",
        bank: "",
        account: "",
      },
      // 商品信息
      productList: [
        {
          id: 1,
          taxIncluded: 1, // 1-含税, 0-不含税
          productName: "",
          productCode: "",
          taxNo: "",
          unit: "",
          quantity: null,
          price: null,
          amount: null,
          taxRate: null,
        },
      ],
      // 旅客运输服务
      passengerList: [
        {
          id: 1,
          passenger: "",
          idType: "",
          idNo: "",
          date: "",
          departure: "",
          destination: "",
          vehicleType: "",
          seatLevel: "",
        },
      ],
      // 销售方信息
      sellerForm: {
        name: "",
        phone: "",
        address: "",
      },
      // 其他
      remark: "",
      payee: "",
      checker: "",
      drawer: "",
      // 规则
      rules: {
        projectType: [
          { required: true, message: "请选择项目分类", trigger: "change" },
        ],
        invoiceType: [
          { required: true, message: "请选择发票类型", trigger: "change" },
        ],
        isSpecial: [
          {
            required: true,
            message: "请选择是否允许开专票",
            trigger: "change",
          },
        ],
      },
      buyerOption: {
        height: "calc(50vh - 50px)",
        calcHeight: 30,
        tip: false,
        border: true,
        index: true,
        selection: true,
        searchMenuSpan: 6,
        labelWidth: "150",
        columnBtn: false,
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        column: [
          {
            label: "主键",
            prop: "id",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            overHidden: true,
          },
          {
            label: "购方类型",
            prop: "buyerType",
            type: "select",
            dataType: "number",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            span: 24,
            // search: true,
            dicUrl: "/api/blade-system/dict/dictionary?code=buyer_type",
            minWidth: 150,
            rules: [
              {
                required: true,
                message: "请选择购方类型",
                trigger: "blur",
              },
            ],
          },
          {
            label: "购方名称",
            prop: "name",
            type: "input",
            minWidth: 150,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入购方名称",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "购方手机号",
            prop: "phone",
            type: "number",
            minWidth: 150,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入购方手机号",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "购方地址",
            prop: "address",
            type: "input",
            minWidth: 150,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入购方地址",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "纳税人识别号",
            prop: "idNo",
            type: "input",
            minWidth: 150,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入纳税人识别号",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "开户银行",
            prop: "bankName",
            type: "input",
            minWidth: 150,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入开户银行",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "银行账号",
            prop: "bankNo",
            type: "number",
            minWidth: 150,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入银行账号",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "收票邮箱",
            prop: "email",
            type: "input",
            minWidth: 150,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入收票邮箱",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "是否默认",
            prop: "isDefault",
            type: "radio",
            dataType: "string",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            span: 24,
            value: "1",
            dicData: [
              {
                dictKey: 0,
                dictValue: "否",
              },
              {
                dictKey: 1,
                dictValue: "是",
              },
            ],
            minWidth: 150,
            rules: [
              {
                required: true,
                message: "是否默认",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      buyerLoading: true,
      buyerData: [],
      buyerPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      dialogBuyerVisible: false,
      sellerDisabled: false,
      dialogSellerVisible: false,
      sellerLoading: true,
      sellerData: [],
      sellerPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      sellerOption: {
        height: "calc(50vh - 50px)",
        calcHeight: 30,
        tip: false,
        border: true,
        index: true,
        selection: true,
        searchMenuSpan: 6,
        labelWidth: "150",
        columnBtn: false,
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        column: [
          {
            label: "主键",
            prop: "id",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            overHidden: true,
          },
          {
            label: "销售方名称",
            prop: "name",
            type: "input",
            minWidth: 150,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入销售方名称",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "销售方地址",
            prop: "address",
            type: "input",
            minWidth: 150,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入销售方地址",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "联系方式",
            prop: "phone",
            type: "number",
            minWidth: 150,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入联系方式",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "是否默认",
            prop: "isDefault",
            type: "radio",
            dataType: "string",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            span: 24,
            value: "1",
            dicData: [
              {
                dictKey: 0,
                dictValue: "否",
              },
              {
                dictKey: 1,
                dictValue: "是",
              },
            ],
            minWidth: 150,
            rules: [
              {
                required: true,
                message: "是否默认",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      productData: [],
      productSelectionList: [],
      passengerSelectionList: []
    };
  },
  components: {
    selectDict,
  },
  computed: {
    ...mapGetters(["permission", "selectMer"]),
  },
  created() {
    // 获取路由参数
    this.rpiNo = this.selectMer.rpiNo;
    if (this.rpiNo) {
      this.getInvoiceData(this.rpiNo);
    }
    // 初始化添加一个商品项
    this.addProduct();
  },
  methods: {
    // 新增商品行
    addProduct() {
      this.productList.push({
        id: Date.now(),
        taxIncluded: 1, // 1-含税, 0-不含税
        productName: "",
        productCode: "",
        taxNo: "",
        unit: "",
        quantity: null,
        price: null,
        amount: null,
        taxRate: null,
      });
    },
    // 删除商品行
    removeProduct() {
      for (let i = 0; i < this.productList.length; i++) {
        for (let k = 0; k < this.productSelectionList.length; k++) {
          if (this.productList[i].id === this.productSelectionList[k].id) {
            this.productList.splice(i, 1);
          }
        }
      }
    },
    productSelectionChange(e) {
      this.productSelectionList = e;
    },
    // 新增旅客行
    addPassenger() {
      this.passengerList.push({
        id: Date.now(),
        passenger: "",
        idType: "",
        idNo: "",
        date: "",
        departure: "",
        destination: "",
        vehicleType: "",
        seatLevel: "",
      });
    },
    // 删除旅客行
    removePassenger(item) {
      for (let i = 0; i < this.passengerList.length; i++) {
        for (let k = 0; k < this.passengerSelectionList.length; k++) {
          if (this.passengerList[i].id === this.passengerSelectionList[k].id) {
            this.passengerList.splice(i, 1);
          }
        }
      }
    },
    passengerSelectionChange(e) {
      this.passengerSelectionList = e;
    },
    // 提交表单
    submitForm() {
      this.$refs.invoiceForm.validate((valid) => {
        if (valid) {
          const params = {
            productList: this.productList,
            rpiNo: this.rpiNo,
            buyerNo: this.buyerForm.buyerNo,
            specificList: this.passengerList,
            remark: this.remark,
            ...this.invoiceForm,
            // seller: this.sellerForm,
          };
          add(params).then(
            () => {
              this.getInvoiceData(this.rpiNo);
              this.$message({
                type: "success",
                message: "默认设置成功!",
              });
            },
            (error) => {
              window.console.log(error);
            }
          );
        }
      });
    },
    getInvoiceData(rpiNo) {
      info(this.invoiceForm.invoiceKind, rpiNo).then((res) => {
        this.buyerForm = res.data.data.buyerDTO;
        this.sellerForm = res.data.data.seller;
        this.productList = res.data.data.productList;
        this.passengerList = res.data.data.specificList;
        this.payee = res.data.data.payee;
        this.checker = res.data.data.checker;
        this.drawer = res.data.data.drawer;
        this.remark = res.data.data.remark;
        if (res.data.data.projectType) {
          this.invoiceForm.projectType = res.data.data.projectType;
        }
        if (res.data.data.invoiceType) {
          this.invoiceForm.invoiceType = res.data.data.invoiceType;
        }
        if (res.data.data.isSpecial) {
          this.invoiceForm.isSpecial = res.data.data.isSpecial+'';
        }
        // this.invoiceData.invoiceDate = this.invoiceData.invoiceDate.substring(0, 10);
        // this.invoiceData.payDate = this.invoiceData.payDate.substring(0, 10);
        // this.invoiceData.payTime = this.invoiceData.payTime.substring(11, 16);
      });
    },
    /**
     * @func 关闭弹窗
     * @desc 点击关闭的回调
     * @param {Function} done - 完成的回调
     * */
    handleBuyerClose(done) {
      this.buyerOnLoad(this.buyerPage);
      done();
    },
    buyerCurrentChange(currentPage) {
      this.buyerPage.currentPage = currentPage;
    },
    buyerSizeChange(pageSize) {
      this.buyerPage.pageSize = pageSize;
    },
    buyerRefreshChange() {
      this.buyerOnLoad(this.page, this.query);
    },
    buyerOnLoad(page, params = {}) {
      this.buyerLoading = true;
      getBuyerList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, { rpiNo: this.rpiNo })
      ).then((res) => {
        const data = res.data.data;
        this.buyerPage.total = data.total;
        this.buyerData = data.records;
        this.buyerLoading = false;
      });
    },
    handleBuyer(row) {
      this.buyerForm = { ...row };
      this.buyerDisabled = true;
      this.dialogBuyerVisible = false;
    },
    /**
     * @func 关闭弹窗
     * @desc 点击关闭的回调
     * @param {Function} done - 完成的回调
     * */
    handleSellerClose(done) {
      this.sellerOnLoad(this.sellerPage);
      done();
    },
    sellerCurrentChange(currentPage) {
      this.sellerPage.currentPage = currentPage;
    },
    sellerSizeChange(pageSize) {
      this.sellerPage.pageSize = pageSize;
    },
    sellerRefreshChange() {
      this.sellerOnLoad(this.page, this.query);
    },
    sellerOnLoad(page, params = {}) {
      this.sellerLoading = true;
      addressList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, { rpiNo: this.rpiNo })
      ).then((res) => {
        const data = res.data.data;
        this.sellerPage.total = data.total;
        this.sellerData = data.records;
        this.sellerLoading = false;
      });
    },
    handleSeller(row) {
      this.sellerForm = { ...row };
      this.sellerDisabled = true;
      this.dialogSellerVisible = false;
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (column.property === "amount" || column.property === "price") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "";
        }
      });

      return sums;
    },
    selectProduct(i, val, row) {
      this.productList[i].specification = row.specification;
      this.productList[i].unit = row.unit;
      this.productList[i].productCode = row.productCode;
      this.productList[i].productCount = row.productCount;
      this.productList[i].price = row.price;
      this.productList[i].amount = row.amount;
      this.productList[i].taxRate = row.taxRate;
    },
  },
};
</script>

<style lang="scss" scoped>
.invoice-section {
  border-radius: 4px;
  border: 1px solid #e6e6e6;
}

.invoice-footer {
  text-align: center;
  margin-top: 20px;
}

.haruyuki-title-bar-sm {
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.el-table .el-input,
.el-table .el-select {
  width: 100%;
}

.buyer-type-radio-group {
  margin-bottom: 18px; // 与 el-form-item 保持一致
}

.buyer-name-input .el-input__icon {
  cursor: pointer;
}

.total-row {
  font-weight: bold;
  text-align: right;
  margin-top: 10px;
  padding-right: 20px;
}

.title-box {
  width: 50px;
  border-right: 1px solid #e6e6e6;
  font-size: 32px;
  writing-mode: vertical-lr;
  text-align: center;
  background-color: #f3f7ff;
  &.bl {
    border-left: 1px solid #e6e6e6;
  }
}

.haruyuki-flex1 {
  flex: 1;
}

.haruyuki-flex2 {
  flex: 2;
}
.haruyuki-padding {
  padding: 20px;
}

.haruyuki-mt-10 {
  margin-top: 10px;
}

.haruyuki-mb-10 {
  margin-bottom: 10px;
}

::v-deep .el-form-item.is-required .el-form-item__label:before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
</style>